<template>
  <div class="tree">
    <!-- 树状图组件 父元素加display:flex;-->
    <div class="main" v-show="triangleSwitch">
      <div class="main_top">
        <!-- <div class="main_top_left">
          <el-button class="btn" icon="el-icon-refresh" size="mini" @click="refresh"></el-button>
        </div> -->
        <div class="main_top_middle">
          <el-input class="btn" placeholder="请输入" v-model="filterText" size="mini"></el-input>
        </div>
        <div class="main_top_right">
          <el-button icon="el-icon-search" size="mini"></el-button>
        </div>
      </div>
      <div class="main_botttom">
        <el-tree
          class="filter-tree"
          :data="treeVirtual"
          :props="defaultProps"
          default-expand-all
          @node-click="getCheckedNodes"
          :filter-node-method="filterNode"
          ref="tree"
        ></el-tree>
      </div>
    </div>
    <div class="triangle" @click="openAndClose">
      <div :style="triangleSwitch?styleForTriangleOpen:styleForTriangleClose"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["treeData"],
  data() {
    return {
      //css
      //组件开关
      triangleSwitch: true,
      //组件打开时三角型箭头朝右为打开状态
      styleForTriangleOpen: {
        "border-right": "16px solid #CBCBCB",
        "border-top": "8px solid transparent",
        "border-bottom": "8px solid transparent",
        transition: "0.2s"
      },
      //组件关闭时三角形箭头朝左为关闭状态
      styleForTriangleClose: {
        "border-left": "16px solid #CBCBCB",
        "border-top": "8px solid transparent",
        "border-bottom": "8px solid transparent",
        transition: "0.2s"
      },
      //..
      filterText: "",
      treeVirtual: [],
      defaultProps: {
        children: "child",
        label: "name"
      }
    };
  },
  created() {
    this.treeVirtual = JSON.parse(JSON.stringify(this.treeData));
    console.log("树形图传入数据！");
    console.log(this.treeVirtual);
    console.log(this.treeData);
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //开关组件
    openAndClose() {
      this.triangleSwitch = !this.triangleSwitch;
    },
    getCheckedNodes(val) {
      console.log(val);
      //
      this.$emit("treeOutput", val);
    },
    //刷新
    refresh(){
      this.$emit("refreshFun","refresh!")
    }
  }
};
</script>
<style lang="scss" src="../../../styles/triangle.scss" scoped></style>
<style lang="scss" scoped>
.tree{
  .main{
    // .main_top_left{
    //   /deep/.el-button--mini{
    //     padding: 0;
    //     margin: 0;
    //     width: 30px;
    //     height: 30px;
    //   }
    // }main_top_right
    .main_top{
      /deep/.main_top_right{
        width: 30px;
        height: 30px;
        float: right;
        /deep/.el-button--mini{
          padding: 0;
          margin: 0;
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>
